<script setup>
const qiniuParseUrl = String(import.meta.env.VITE_QINIU_PARSE_URL)
import {CircleClose} from "@element-plus/icons-vue";
import * as qiniu from "qiniu-js";
const emit = defineEmits("handleRemove", "handleSuccess")
const props = defineProps({
  type: {
    type: String,
    default: "image"
  },
  title: {
    type: String
  },
  token: {
    type: String
  },
  showTip: {
    type: String,
  },
  fileSrc: {
    type: String
  },
  prop: {
    type: String
  }
})

const fileUpload = (e, prop) => {
  const file = e.file;
  if (!file) return;

  const fileName = file.name;  // 获取文件名
  const fileExtension = fileName.slice((fileName.lastIndexOf(".") - 1 >>> 0) + 2);  // 提取文件扩展名

  // const key
  const key = `images/${prop}/${new Date().getTime()}.${fileExtension}`;
  const config = {}
  const putExtra = {}
  const observer = {
    next(res){
      // 上传过程中的状态信息
      console.log(res.total.percent);
    },
    error(err){
      // 上传错误后的回调
      console.log(err);
    },
    complete(res){
      // 上传完成后的回调
      console.log('上传完成: ', res);
      emit("handleSuccess", props.prop, qiniuParseUrl + "/" + key)
    }
  }
  const observable = qiniu.upload(file, key, props.token, putExtra, config)
  const subscription = observable.subscribe(observer)
}

const handleRemove = (prop) => {
  emit("handleRemove", prop)
}
</script>

<template>
  <el-upload
    :disabled="!!fileSrc"
    class="avatar-uploader mr-15"
    action=""
    :show-file-list="false"
    :http-request="e => fileUpload(e, prop)">
    <div class="upLoadImg">
      <el-icon v-if="fileSrc" class="close" @click="handleRemove(prop)"><CircleClose /></el-icon>
      <video v-if="fileSrc && type === 'video'" :src="fileSrc" />
      <el-image v-if="fileSrc && type === 'image'" style="width: 100px; height: 100px" :src="fileSrc" :zoom-rate="1.2"
                :max-scale="7" :min-scale="0.2" :preview-src-list="[fileSrc]" :initial-index="4" fit="cover"/>
      <div v-if="!fileSrc">
        <img class="addImg" src="/src/assets/addIm%20g.png" alt="">
        <div class="title">{{ title || '上传图片' }}</div>
      </div>
    </div>
  </el-upload>
  <img v-if="showTip" class="tipImg" :src="showTip" alt="">
</template>

<style scoped lang="scss">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

//上传的样式
.upLoadImg {
  border: 1px dashed #d9d9d9;
  border-radius: 4px;
  text-align: center;
  width: 120px;
  height: 120px;
  padding: 10px 15px;

  video {
    width: 100%;
    height: 100%;
  }

  .title {
    font-size: 12px;
    color: #8c939d;
  }

  .addImg {
    width: 40px;
    height: 40px;
  }
}

.tipImg {
  margin-left: 20px;
  width: 110px;
  height: 80px;
}
</style>
